<template>
	<view class="content">
		<view v-if="userInfo.role == 2">
			<view class="my-m-title">今日数据</view>
			<view class="count-con flex-between">
				<view @click="goOrderList(1)" class="count-item">
					<view>新订单</view>
					<view class="num"> {{lastDaysData.newOrders}}</view>
				</view>
				<view @click="goOrderList(2)" class="count-item">
					<view>今起3日待入住</view>
					<view class="num">{{lastDaysData.nearCheckIn}}</view>
				</view class="count-item">
				<view @click="goOrderList(3)" class="count-item">
					<view>今起3日待退房</view>
					<view class="num">{{lastDaysData.nearCheckOut}}</view>
				</view>
				<view @click="goOrderList(4)" class="count-item">
					<view>今日待退房</view>
					<view class="num">{{lastDaysData.todayCheckOut}}</view>
				</view>
			</view>
			
			
			<view class="add-button" @click="addHouse">
				新增房源
			</view>
			<view class="title">我的房源</view>

			<van-tabs line-width="20" @change="changeTab" color="#222222">
				<van-tab v-for="(item, index) in tabList" :title="item.title" :key="index"></van-tab>
			</van-tabs>
		</view>
		<view v-else>
			<view class="search-top-con">
				<view @click="showCity" class="search-city oellipsis">{{searchData.city || '城市'}}</view>
				<view @click="goPage('/subSearch/textSearch')" :style="{color:searchData.keywords?'#000': ''}"
					class="search-word">
					{{searchData.keywords || '地址/关键词/特色标签'}}
				</view>
				<view class="line"></view>
				<!-- <view @click="goMap" class="search-map">
					<view>
						<van-icon size="18" name="map-marked" />
					</view>
					<view>地图找房</view>
				</view> -->
			</view>
			<view class="search-bottom-con flex-between">
				<view class="flex-between " @click="goPage('/pages/date/selectDate?pageType=1')">
					<span class="color-orange" v-if="searchData.date">
						<view>入 {{searchData.dateText[0]}}</view>
						<view>离 {{searchData.dateText[1]}}</view>
					</span>
					<span v-else>
						日期
					</span>
					<view :class="{'border-top-color': searchData.date}" class="triangle-down "></view>
				</view>
				<view>
					<picker :class="{'color-orange': searchData.orderText}" range-key="label" @change="changeSort"
						:value="sortIndex" :range="orderbyList">
						<span>{{searchData.orderText || '排序'}}</span>
						<view :class="{'border-top-color': searchData.orderText}" class="triangle-down"></view>
					</picker>

				</view>
				<view :class="{'color-orange': searchData.filter}" @click="goPage('/subSearch/house?pageType=1')">
					筛选
					<view :class="{'border-top-color': searchData.filter}" class="triangle-down"></view>
				</view>
			</view>

			<view class="search-tag-con">
				<span @click="selectTag(subItem)" :class="{'active-item': subItem.checked}"
					v-for="(subItem, subIndex) in tagList" class="tag-item search-tag-item" :key="subIndex">
					{{subItem.label}}
				</span>
			</view>

		</view>




		<view v-if="list.length > 0">
			<view @click="jump(item)" :key="index" v-for="(item, index) in list" class="home-info-con">
				<view class="cover-img-con">
					<span v-if="item.statusName" class="cover-img-tips">
						{{item.statusName }}
					</span>
					<span v-if="userInfo.role == 1" class="cover-img-tips house-status">
						{{item.available_date_string }}
					</span>
					
					<image  style="width:678rpx; height:411rpx;"  lazy-load  mode="center" :src="item.coverSrc">
					</image>
				</view>
				<view class="home-name-con">
					<view class="name">{{item.name || '无房源名称'}}</view>
					<view class="pb20" v-if="userInfo.role == 1 || !userInfo">
						<view class="tag-list-con">
							<span class="tag-code">#{{item.id}}</span>
							<span v-for="(subItem, subIndex) in item.characterTag" class="tag-item" :key="subIndex">
								{{subItem.tag_name}}
							</span>
						</view>
						<view class="home-des">
							{{item.houseTagString}}
						</view>
						<view class="home-des">{{item.city.city}}</view>
					</view>
				</view>
				<view class="home-price-con">
					<view v-for="(subItem, subIndex) in item.rooms" :key="subIndex" class="home-price">
						<view>{{subItem.name || '无房间名称'}}</view>
						<view class="right">{{$formatNumber(subItem.price_public || 0)}}加元/晚</view>
					</view>


				</view>
				<view class="status-tips-con" v-if="userInfo.role == 2 && item.status == 3">
					<view class="color-orange">房源审核未通过</view>
					<view>{{item.audit.content || '暂无信息'}}</view>
				</view>
				<view v-if="userInfo.role == 2" class="btn-list">
					<span @click="viewHouse(item)" class="preview">预览</span>
					<span v-if="item.status != 1" @click="editHouse(item, index)">编辑</span>
					<span class="underLine" @click="goAssetPage(item)">资产</span>
					<span @click="deactive(item)" v-if="item.status == 2" class="underLine">下架</span>
				</view>
			</view>
		</view>
		<!-- <uni-load-more :status="statusLoadMore" /> -->

		
		<blank tips="暂无信息" v-if="list.length === 0"></blank>
		<!-- <integral ref="integralMart" fromType="index" @checkMore="checkMore"></integral> -->
		<!-- <button @click="scanCode">扫一扫</button> -->
		<loginConfirm ref="loginRef"></loginConfirm>
		<van-dialog confirm-button-class="color-orange" id="van-dialog" />

		<uni-data-picker @change="changeCity" ref="cityRef" class="my-index-data-picker" v-model="searchData.city_id"
			:map="{text:'label', value:'value'}" :localdata="cityList" popup-title="请选择城市"></uni-data-picker>

	</view>
</template>

<script>
	import loginConfirm from '@/components/dialog/loginConfirm.vue'
	import blank from '@/components/blank/index.vue'
	import myfootbtn from '@/components/myBtn/footBtn.vue';
	import Dialog from 'wxcomponents/vant/dialog/dialog';
	import {
		mapState
	} from 'vuex'
	import store from '../../store/index.js'

	export default {
		components: {
			blank,
			loginConfirm,
			// integral
		},
		data() {
			return {
				userInfo: '',
				tabList: [{
						title: '未上架',
						status: 0
					},
					{
						title: '已上架',
						status: 1
					},
				],
				tagIndex: 0,
				list: [],
				publishList: [],
				notPublishList: [],
				tagList: [],
				cityList: [],
				lastDaysData: {
					newOrders: 0, // 新订单
					nearCheckIn: 0, // 今起三日入住
					nearCheckOut: 0, // 今起三日退房
					todayCheckOut: 0 // 今日退房
				},
				orderbyList: [{
						label: '最新上线',
						value: 'latest'
					},
					{
						label: '高价优先',
						value: 'high_price'
					},
					{
						label: '低价优先',
						value: 'low_price'
					},
					{
						label: '最近可租',
						value: 'available_at'
					}
				],
				sortIndex: 0,
				statusLoadMore: 'more'


			}
		},
		computed: {
			...mapState({
				searchData: state => state.searchData
			}),
		},

		onShow() {
			this.init();
			// 获取用户信息
		},
		onReachBottom() {
			if (this.maxDate < new Date().getTime() + 730 * 24 * 60 * 60 * 1000) {
				
			} else {
				this.status = 'noMore';
			}
		},
		methods: {
			async init() {
				this.$removeStorage('roomInfo')
				this.userInfo = this.$getStorage('userInfo');
				// 1: 房客 2: 房东
				this.getList();
				if (!this.userInfo || this.userInfo.role == 1) {
					this.getRecommendTags()
					this.getCityList();

				} else {
					this.getLastDaysData();
				}


			},
			getLastDaysData() {
				this.$http.getLastDaysData().then(res => {
					this.lastDaysData = res;
				})
			},
			getCityList() {
				if (this.cityList && this.cityList.length > 0) {
					return;
				}
				this.$http.getCityHasHouse().then(res => {
					this.handCityData(res);
					res.unshift({
						label: "全部",
						value: ''
					})
					this.cityList = res;

				})
			},
			handCityData(data) {
				data.map(item => {
					item.label = `${item.label}(${item.eng_label})`;
					item.children && this.handCityData(item.children)
				})
			},
			getList() {
				let name = 'getRenting';
				let data = this.searchData;
				if (this.$isLogin() && this.userInfo.role == 2) {
					name = 'getMyHouseList'
					data = {
						limit: 10000,
						page: 1
					}
				}

				this.$http[name](data).then(res => {
					res = res.data || [];
					this.publishList = [];
					this.notPublishList = [];
					res.map(item => {
						const index = item.images.findIndex(i => i.type == 'cover');
						if (index > -1) {
							item.coverSrc = item.images[index].image_url;
						}
						let characterTag = [];
						item.tags.forEach(i => {
							if (i.type == 2) {
								characterTag.push(i);
							}
						})
						item['characterTag'] = characterTag;
						let houseTagString = ''
						if (!this.userInfo || this.userInfo.role == 1) {
							houseTagString =
								`${item.house_type} | ${item.bedrooms}室  ${item.livingrooms}厅 ${item.kitchens}厨  ${item.bathrooms}卫 |  ${(item.area/9).toFixed(2)}m² | ${item.cooking?'可做饭':'不可做饭'}`
							item.houseTagString = houseTagString;
						} else {
							item.statusName = item.status == 0 ? '编辑中' : item.status == 1 ? '审核中' : item
								.status == 3 ? '审核未通过' : '';
							if (item.rooms.length == 0) {
								item.rooms.push({
									name: '无房间名称',
									price: 0
								})
							}
						}

						if (item.status == 2) {
							this.publishList.push(item);
						} else {
							this.notPublishList.push(item);
						}
					})
					if (this.userInfo && this.userInfo.role == 2) {
						this.tagIndex == 0 ? this.list = this.notPublishList : this.list = this.publishList;
					} else {
						this.list = res;
					}

				})
			},
			changeSort(e) {
				this.sortIndex = e.detail.value;
				store.state.searchData.order = this.orderbyList[this.sortIndex].value;
				store.state.searchData.orderText = this.orderbyList[this.sortIndex].label;
				this.getList();

			},
			selectTag(item) {
				item['checked'] = !item['checked'];
				store.state.searchData.tags = this.tagList.filter(item => item.checked).map(item => item.value);
				this.getList();
			},
			getRecommendTags() {
				if (this.tagList && this.tagList.length > 0) {
					return;
				}
				this.$http.getRecommendTags().then(res => {
					res.map(item => {
						item.checked = false;
					})
					this.tagList = res;
				});
			},
			showCity() {
				this.$refs.cityRef.show() // `picker` 为组件的 ref 名称
			},
			getInfo() {
				return new Promise((resolve, reject) => {
					this.$http.getUserInfo().then(res => {
						this.$setStorage('userInfo', res.data)
					})
				})
			},
			changeTab(data) {
				this.tagIndex = data.detail.index;
				this.tagIndex == 0 ? this.list = this.notPublishList : this.list = this.publishList;
			},
			changeCity(node) {
				const value = node.detail.value;
				if (value.length == 1) {
					store.state.searchData.city = '';
				} else {
					store.state.searchData.city = value[2].text;
				}
				this.getList();
			},
			goPage(path) {
				this.$goPage(1, path);
			},
			goAssetPage(item) {
				this.$setStorage('houseId', item.id);
				this.$goPage(1, '/subUserInfo/assetAdmin');
			},
			goMap() {
				let urlString = this.$webViewBaseUrl + '/searchHouse.html?searchData=' + JSON.stringify(store.state
					.searchData);
				let data = {
					src: urlString,
					backUrl: '/pages/index/index'
				}
				this.$setStorage('webViewData', data)
				this.$goPage(1, `/pages/webView/index?url=${urlString}`);
			},
			deactive(item, index) {
				Dialog.confirm({
						title: '提示',
						message: '下架房源后再次上架，需经过审核。是否确定下架该房源?',
					})
					.then(() => {
						this.$http.deactive({
							id: item.id
						}).then(res => {
							this.publishList.splice(index, 1);
							this.list = this.publishList;
							this.$toast('下架成功')
						});
					})
			},
			viewHouse(item) {
				this.$setStorage('houseId', item.id);
				// this.$setStorage('selectDate','');
				this.$goPage(1, '/subHouseDetail/homeDetail');
			},
			jump(item) {
				if (!this.userInfo || this.userInfo.role == 1) {
					this.$setStorage('houseId', item.id);
					// this.$setStorage('selectDate','');
					this.$goPage(1, '/subHouseDetail/homeDetail');
				}
			},
			addHouse() {
				this.$setStorage('houseId', '')
				this.$goPage(1, '/subPublishHouse/baseInfo/setHouseInfo?showTips=1')

			},
			goOrderList(index) {
				if (index == 1) {
					const startDate = this.$timestampToTime(new Date());
					this.$goPage(1, `/subOrder/orderList?dateType=created_at&startDate=${startDate}&endDate=${startDate}`);
				} else if (index == 2) {
					const startDate = this.$timestampToTime(new Date());
					const endDate = this.$timestampToTime(new Date().getTime() + 3 * 24 * 60 * 60 * 1000);
					this.$goPage(1,
						`/subOrder/orderList?dateType=start_at&startDate=${startDate}&endDate=${endDate}&status=2`);
				} else if (index == 3) {
					const startDate = this.$timestampToTime(new Date());
					const endDate = this.$timestampToTime(new Date().getTime() + 3 * 24 * 60 * 60 * 1000);
					this.$goPage(1,
						`/subOrder/orderList?dateType=end_at&startDate=${startDate}&endDate=${endDate}&status=9`);
				} else if (index == 4) {
					const startDate = this.$timestampToTime(new Date());
					const endDate = this.$timestampToTime(new Date());
					this.$goPage(1,
						`/subOrder/orderList?dateType=end_at&startDate=${startDate}&endDate=${endDate}&status=9`);
				}
			},
			editHouse(item, index) {
				if (item.status != 2) {
					this.$setStorage('houseId', item.id);
					this.$goPage(1, '/subPublishHouse/baseInfo/setHouseInfo');
					return;
				}
				Dialog.confirm({
						title: '提示',
						message: '是否确定编辑该房源?确定后系统将自动下架该房源。再次上架需经过审核。',
					})
					.then(() => {
						this.$http.deactive({
							id: item.id
						}).then(res => {
							this.publishList.splice(index, 1);
							this.list = this.publishList;
							this.$setStorage('houseId', item.id);
							this.$goPage(1, '/subPublishHouse/baseInfo/setHouseInfo');
						})

					})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '发现活动',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 36rpx 36rpx 90rpx 36rpx;
		box-sizing: border-box;
		font-size: 36rpx;
		color: #222222;

		.add-button {
			width: 678rpx;
			height: 121rpx;
			background: #FCE353;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			line-height: 121rpx;
			text-align: center;
			box-sizing: border-box;
			margin: 36rpx auto;
		}

		.title {
			font-weight: bold;
			text-indent: 36rpx;
		}

		.home-info-con {
			width: 678rpx;
			padding-bottom: 36rpx;
			// height: 782rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 12rpx 12rpx rgba(0, 0, 0, 0.05);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin: 36rpx auto;

			.cover-img-con {
				position: relative;

				.cover-img-tips {
					text-align: center;
					height: 39rpx;
					line-height: 39rpx;
					background: rgba(0, 0, 0, 0.6);
					border-radius: 12rpx;
					padding: 0 15rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					position: absolute;
					top: 16rpx;
					left: 16rpx;
					z-index: 9;
				}

				.house-status {
					top: 360rpx !important;
				}
			}


			.home-name-con {
				font-weight: 500;
				font-size: 30rpx;
				// text-indent: 36rpx;
				padding: 0 36rpx;
				min-height: 96rpx;
				border-bottom: 1rpx solid #D8D8D8;

				.name {
					line-height: 66rpx;
				}

				.tag-list-con {
					.tag-code {
						border: 1rpx solid #A7A7A7;
						border-radius: 4px;
						padding: 0 8rpx;
						height: 35rpx;
						line-height: 35rpx;
						color: #A7A7A7;
						font-size: 24rpx;
						margin-right: 10rpx;
					}

					.tag-item {
						padding: 0 8rpx;
						height: 35rpx;
						line-height: 35rpx;
						background: #FFF9F1;
						font-size: 24rpx;
						color: #EC8403;
						border-radius: 2rpx;
						border: 1rpx solid #FFE3C0;
						margin: 10rpx 10rpx 10rpx 0rpx !important;
						white-space: nowrap;

					}
				}

				.home-des {
					font-size: 24rpx;
					color: #6E6E6E;
					margin: 10rpx 0;

					.split-line {
						margin: 0 15rpx;
					}

					// .setBorder {
					// 	border-right: 1px solid #6E6E6E;
					// 	padding: 			
					// }

				}
			}

			.home-price-con {
				padding: 36rpx;

				.home-price {
					display: flex;
					justify-content: space-between;
					height: 65rpx;
					line-height: 65rpx;
					font-size: 30rpx;
					color: #383B43;

					.right {
						font-size: 24rpx;
						font-size: 30rpx;
						color: #E33838;
					}
				}
			}

			.btn-list {
				// margin: 36rpx auto;
				text-align: center;

				span {
					font-size: 24rpx;
					color: #EC8403;
					width: 109rpx;
					height: 54rpx;
					line-height: 54rpx;
					background: #FAFAFA;
					border-radius: 121rpx 121rpx 121rpx 121rpx;
					border: 1rpx solid #DDDDDD;
					text-align: center;
					display: inline-block;
				}

				.preview {
					margin-right: 42rpx;
				}

				.underLine {
					margin-left: 42rpx;
				}
			}
		}

		.status-tips-con {
			width: 618rpx;
			padding: 20rpx 30rpx;
			// height: 124rpx;
			background: #FFF8EE;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 1rpx solid #EC8403;
			font-size: 24rpx;
			color: #868686;
			margin: 30rpx auto;
			box-sizing: border-box;
			line-height: 36rpx;
		}

	}

	.search-top-con {
		width: 678rpx;
		height: 90rpx;
		background: #F5F6F9;
		border-radius: 12rpx;
		display: flex;
		font-size: 27rpx;
		align-items: center;
		margin: 0 auto 30rpx;

		.search-city {
			font-weight: bold;
			color: #000;
			width: 165rpx;
			text-align: center;
			padding: 0 10rpx;
		}

		.search-word {
			color: #B2B2B2;
			line-height: 40rpx;
			height: 40rpx;
			border-left: 1rpx solid #B2B2B2;
			text-indent: 15rpx;
			width: 360rpx;
		}

		.line {
			width: 1rpx;
			height: 100%;
			background-color: #fff;
		}

		.search-map {
			color: #000;
			font-size: 22rpx;
			font-weight: bold;
			text-align: center;
			margin-left: 20rpx;
		}
	}

	.search-bottom-con {
		font-size: 26rpx;
		color: #484848;
		font-weight: 400;
	}

	.search-tag-con {
		white-space: nowrap;
		margin: 10rpx 0;
		overflow: hidden;
		overflow-x: auto;

		.tag-item {
			padding: 0 8rpx;
			height: 35rpx;
			line-height: 35rpx;
			font-size: 24rpx;
			color: #646464;
			border-radius: 2rpx;
			margin-right: 10rpx;
			margin-top: 18rpx;
			white-space: nowrap;
			border: 1rpx solid #BDBCBC;
		}


	}

	.count-con {
		width: 678rpx;
		height: 222rpx;
		background: #FFFBF5;
		border-radius: 12rpx;
		margin: 20rpx auto;
		font-weight: 400;
		font-size: 24rpx;
		color: #222222;

		.count-item {
			// width: 128rpx;
			height: 128rpx;
			border-right: 1rpx solid #F0E9DF;
			line-height: 40rpx;
			text-align: center;
			padding: 0 20rpx;

		}

		.count-item:nth-last-child(1) {
			border-right: none;
		}

		.num {
			font-weight: bold;
			font-size: 43rpx;
			color: #EC8403;
			line-height: 80rpx;
		}
	}

	.active-item {
		background: #FCE353 !important;
		color: #222222 !important;
	}

	.search-tag-item {
		background-color: #fff;
		margin-right: 30rpx;
		padding: 0 16rpx;
	}
</style>
<style>
	.loading {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.my-index-data-picker .uni-data-tree-input {
		display: none;
	}
</style>